import React from 'react';
import {Card, Button, message, Table} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';
import BaseForm from '../../components/BaseForm'

export default class Order extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            dataSource: []
        }
    }

    params = {
        page: 1
    };
    //模块化
    formList = [
        {
            type: 'SELECT',
            label:'城市',
            filed:'city',
            placeholder:'全部',
            initialValue:1,
            width:80,
            list:[
                {id: 0,name:'全部'},
                {id: 1,name:'北京'},
                {id: 2,name:'天津'},
                {id: 3,name:'上海'}
            ]
        },
        {
            type: '时间查询',
        },
        {
            type: 'SELECT',
            label:'订单状态',
            field:'op_mode',
            width:100,
            placeholder:'全部',
            initialValue:1,
            list:[
                {id: 0,name:'全部'},
                {id: 1,name:'进行中'},
                {id: 2,name:'结束行程'}
            ]
        },
        // {
        //     type: 'INPUT',
        //     label:'模式',
        //     field:'mode',
        //     width:100,
        //     placeholder:'全部',
        // },
    ];

    componentDidMount() {
        this.request();
    };

    // 接收子元素的值
    handleFilter = (params) => {
      this.params = params;
      this.request();
    };

    request = () => {
        let that = this;
        axios.Axios({
            url: "order/list",
            method: 'get',
            params: this.params
        }).then(res => {
            this.setState({
                dataSource: res.list,
                loading: false,
                pagination: Utils.pagination(res, (current) => {
                    that.params.page = current;
                    this.request()
                })
            })
        })
    };

    onRowClick = (record, index) => {
        let selectKey = [index+1];
        this.setState({
            selectedRowKeys: selectKey,
            selectedItem: record
        })
    };

    handleOpenDetail = () => {
        let item = this.state.selectedItem;
        console.log(item);
        if(!item){
            message.info('请先选择一条订单');
            return false;
        }
        window.open('/#/common/order/detail/' + item.id,'_blank');
    };

    render() {
        const columns = [
            {
                title: '订单编号',
                key: 'order_sn',
                dataIndex: 'order_sn'
            },
            {
                title: '车辆编号',
                key: 'bike_sn',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                key: 'user_name',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                key: 'moblie',
                dataIndex: 'moblie'
            },
            {
                title: '里程',
                key: 'distance',
                dataIndex: 'distance'
            },
            {
                title: '行驶时长',
                key: 'total_time',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                key: 'status',
                dataIndex: 'status'
            },
            {
                title: "开始时间",
                key: 'start_time',
                dataIndex: 'start_time'
            },
            {
                title: "结束时间",
                key: 'end_time',
                dataIndex: 'end_time'
            },
            {
                title: "订单金额",
                key: 'total_fee',
                dataIndex: 'total_fee'
            },
            {
                title: "实付金额",
                key: 'user_pay',
                dataIndex: 'user_pay'
            },
        ];

        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type: 'radio',
            selectedRowKeys
        };
        return (
            <div className="wrap">
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter}/>
                </Card>
                <Card style={{marginTop: 20}}>
                    <Button type='primary' onClick={this.handleOpenDetail}>订单详情</Button>
                    <Button>结束订单</Button>
                </Card>
                <div className="content-wrap">
                    <Table
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={this.state.pagination}
                        rowKey={record => record.id}
                        loading={this.state.loading}
                        rowSelection={rowSelection}
                        onRow={(record,index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record,index);
                                }
                            }
                        }}
                    />
                </div>
            </div>
        )
    }
}
